{% load static %}
<!doctype html>
<html lang="en">
<head>
</head>
<!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.12/ace.min.css" />  
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.12/ace.js"></script> -->
<link rel="stylesheet" href="{% static 'ace-builds/1.36.0/css/ace.css'%}" />  
<script src="{% static 'ace-builds/1.36.0/src-noconflict/ace.js'%}"></script>
<script src="https://cdn.jsdelivr.net/npm/@json-editor/json-editor@latest/dist/jsoneditor.min.js"></script>
<script src="
https://cdn.jsdelivr.net/npm/js-cookie@3.0.5/dist/js.cookie.min.js
"></script>
<body>
  <div id='editor' style="height: 500px; width: 100%;"></div>
  <button id='submit'>Submit (console.log)</button>
  {{ defaultGitCloneParams|json_script:"defaultGitCloneParams" }}
  <script>
    // Initialize the editor

    const defaultGitCloneParams = JSON.parse(document.getElementById('defaultGitCloneParams').textContent);

    const jsonData={
      "repoUrl":       "{{ defaultGitCloneParams.repoUrl }}",
      "localRepoHub":  "{{ defaultGitCloneParams.localRepoHub }}",
      "localRepoHome": "{{ defaultGitCloneParams.localRepoHome }}"
    }

    var editor = ace.edit("editor", {
      value: JSON.stringify(
        defaultGitCloneParams,
        null,
        2
      )
    });
    editor.setTheme("ace/theme/github"); // 设置主题  
    editor.session.setMode("ace/mode/json"); // 设置语言
  
  
    // Hook up the submit button to log to the console
    document.getElementById('submit').addEventListener('click', function () {
      // Get the value from the editor
      console.log(editor.getValue());
  
      const dataToSend = editor.getValue();
      // const jsonData = JSON.stringify(dataToSend);  
      const csrftoken = Cookies.get('csrftoken');
  
      fetch("{% url 'clone' %}", {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'X-CSRFToken': csrftoken,
        },
        body: dataToSend
      })
        .then(response => response.json())
        .then(data => {
          console.log('Success:', data);
          // 在这里处理响应数据，如显示成功消息  
          
        })
        .catch((error) => {
          console.error('Error:', error);
          // 在这里处理错误情况  
        });
  
  
    });
  </script>
</body>
</html>











